import React from 'react';
import { useState } from 'react'
import type { FC } from 'react';
import { useNavigate } from 'react-router-dom'
import { Image, Input, Button, Toast } from 'antd-mobile'
import loginHand from '../../../public/Image/login_hand.png'
import './index.css'
import emailIcon from '../../../public/Icon/email.png'
import passIcon from '../../../public/Icon/password.png'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import { debounce } from '../../utils/debounce'
import weChat from '../../../public/Icon/weChat.png'
// import { JSEncrypt } from 'jsencrypt';
import { encrypt } from '../../utils/encrypt';
import request from '../../api/axios'
// import { useAppSelector } from '../../store/hooks'
const Login: FC = ({ }) => {
    const navigate = useNavigate()
    const [email, setEmail] = useState<string>("");
    const [passWord, setPassWord] = useState<string>("");
    const [visible, setVisible] = useState(false);
    const [loading] = useState(false);

    // 获取用户列表数据
    // const { users } = useAppSelector((state) => state.userList);

    const btnOk = async () => {
        // 表单验证
        if (!email.trim()) {
            Toast.show('请输入邮箱');
            return;
        }
        if (!passWord.trim()) {
            Toast.show('请输入密码');
            return;
        }

        // 邮箱格式验证
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            Toast.show('请输入正确的邮箱格式');
            return;
        }


        // 准备请求数据
        const data = {
            email: email.trim(),
            pwd: encrypt(passWord)
        };
        const query = new URLSearchParams({ email, pwd: encrypt(passWord) });
        // 调用登录API
        const response: any = await request.post(`/api/health/user/v1/login?${query}`, { params: data });
        console.log(response);

        // 处理登录成功
        if (response?.data?.status === '0000') {
            // 保存token到localStorage
            localStorage.setItem('token', response.data.result.jiGuangPwd);
            localStorage.setItem('user', JSON.stringify(response.data.result));
            Toast.show({
                content: `${response.data.message}`,
            })
            navigate('/home');
        } else {
            Toast.show({
                content: `${response.data.message}`,
            })
        }
    }
    return (
        <div className="login-container">
            {/* 顶部图标 */}
            <div className="login-top-icon">
                <div className="icon-circle">
                    <Image src={loginHand} />
                </div>
            </div>

            {/* 白色登录卡片 */}
            <div className="login-card">
                {/* 邮箱输入框 */}
                <div className="input-group">
                    <div className="input-icon">
                        <Image src={emailIcon} width="20px" height="20px" />
                    </div>
                    <Input
                        placeholder="请输入邮箱"
                        value={email}
                        onChange={setEmail}
                        className="login-input"
                    />
                </div>

                {/* 密码输入框 */}
                <div className="input-group">
                    <div className="input-icon">
                        <Image src={passIcon} width="20px" height="20px" />
                    </div>
                    <Input
                        type={visible ? 'text' : 'password'}
                        placeholder="请输入密码"
                        value={passWord}
                        onChange={setPassWord}
                        className="login-input"
                    />
                    <div className="password-toggle" onClick={() => setVisible(!visible)}>
                        {!visible ? (
                            <EyeInvisibleOutline fontSize={20} />
                        ) : (
                            <EyeOutline fontSize={20} />
                        )}
                    </div>
                </div>

                {/* 登录按钮 */}
                <Button
                    block
                    color='primary'
                    size='large'
                    className="login-button"
                    onClick={debounce(btnOk, 1000, true)}
                    loading={loading}
                    disabled={loading}
                >
                    {loading ? '登录中...' : '登录'}
                </Button>

                {/* 底部链接 */}
                <div className="login-links">
                    <span
                        className="forgot-password"
                        onClick={() => navigate('/setPass')}
                    >
                        忘记密码
                    </span>
                    <span
                        className="register-link"
                        onClick={() => navigate('/register')}
                    >
                        暂无账号? 立即注册
                    </span>
                </div>
            </div>

            {/* 其他登录方式 */}
            <div className="other-login">
                <div className="divider">
                    <span>其它登录方式</span>
                </div>
                <div className="wechat-login">
                    <Image src={weChat} width="30px" height="30px" />
                </div>
            </div>
        </div>
    );
};

export default Login;